import React, { Component } from 'react'
import axios from 'axios'
import Particles from 'react-particles-js';
import './Login.css'
// From表单
import { Form, Input, Button, Checkbox ,message} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

export default class index extends Component {

  onFinish = values => {
    axios.get(`http://localhost:8000/users?username=${values.username}&password=${values.password}&roleState=true`).then(
      (res)=>{
        if(res.data.length>0){
          localStorage.setItem("isLogin",true)
          localStorage.setItem("users",JSON.stringify(res.data[0])) //只能存字符串
          this.props.history.push('/')
        }else{
            //失败弹出
            // console.log("用户名密码不匹配")
            message.error('用户名密码不匹配');
        }
      }
    )
    
    return this.userList.map(item =>{
      if(item.username === values.username){

      }
    })
   }

  render() {
    var ht = window.innerHeight
    return (
      <div>
          <Particles style={{backgroundColor:'#333'}} height={(ht-5)+'px'}/>
          <Form
            name="normal_login"
            className="login-form myform"
            initialValues={{ remember: true }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入你的用户名' }]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入你的密码' }]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住我</Checkbox>
              </Form.Item>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </Form.Item>
          </Form>
       </div>
     )
  }
}
